<template>
	<view class="home">
		<!-- 头部自定义 -->
		<view class="head">
			<view class="money">
				<text @click="sign()">签到领钱</text>
			</view>
			<text class="appname">万象生活团购</text>
		</view>
		<!-- 轮播图 -->
		<swiper indicator-color="rgba(255,255,255,0.3)" indicator-active-color="rgba(255,255,255,1)" class="swiper"
		 :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular">
			<swiper-item v-for="item in bannerlist" :key="item.vid">
				<view class="swiper-item uni-bg-red">
					<image class="swiperimage" :src="item.bannerImage" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 入口 -->
		<view class="enter">
			<view v-for="item in enterList" :key="item.id" class="Ienter">
				<image @click="go" :src="item.img" mode=""></image>
			</view>
		</view>
		<!-- 团购推荐 -->
		<view class="BUYindex">
			<view class="recommend">
				<view class="title">
					<text class="yello">团购推荐</text>
					<text @click="entermore">点击查看更多>></text>
				</view>
				<view class="shoplist">
					<view style="margin-right: 14rpx;" v-for="item in shoplist" :key="item.id">
						<view class="shopimg" @click="tgroupde(item.id)">
							<image :src="item.images"></image>
						</view>
						<view class="shopname">
							<view class="nametext">{{item.commodityName}}</view>
						</view>
						<view class="shopmoney">
							<text style="color: #000000;font-size: 20rpx;">￥</text>
							<text style="color:#FF6633;font-weight: bold;font-size: 34rpx;">{{item.currentPrice}}</text>
							<text style="font-weight: bold;font-size: 20rpx;color: #999999;margin-left: 14rpx;">月售{{item.salesVolume}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				longitude: 104.10194,
				latitude: 30.65984,
				shop: false,
				shoptwo: false,
				indicatorDots: true,
				vertical: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				circular: true,
				bannerlist: [],
				shoplist: [],
				freshlist: [],
				enterList: [{
					id: 0,
					img: 'https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/shu.png'
				}, {
					id: 0,
					img: 'https://obs-4a40.obs.cn-southwest-2.myhuaweicloud.com/shop/hanbao.png'
				}]
			}
		},

		onLoad() {
			this.judge();
			// 轮播图
			const requestBanner = {
				url: `/api/commodity/banner/list`,
				method: "POST",
				data: {
					vid: 1,
					current: 1,
					size: 10
				},
				callBack: (res) => {
					// console.log(res.data);
					if(res.code == 200){
						this.bannerlist = res.data
					}
				}
			}
			this.$http.request(requestBanner,true)

		},

		methods: {
			//判断是否授权地理位置
			judge() {
				let that = this;
				wx.getSetting({
					success(res) {
						if (!res.authSetting['scope.userLocation']) {
							wx.authorize({
								scope: 'scope.userLocation',
								success() {
									that.getLocation();
								}
							})
						} else {
							that.getLocation();
						}
					}
				})
			},
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						console.log(res)
						that.longitude = res.longitude;
						that.latitude = res.latitude;
						uni.setStorageSync('longitude',that.longitude);
						uni.setStorageSync('latitude',that.latitude);
						// that.getFresh();
						that.getGroup();
					},
					fail: function(err) {
						uni.setStorageSync('longitude',that.longitude);
						uni.setStorageSync('latitude',that.latitude);
						// that.getFresh();
						that.getGroup();
					}
				})
			},
			//获取综合首页团购推荐商品
			getGroup() {
				const requestParam = {
					url: "/api/commodity/index/list",
					method: "POST",
					data: {
						vid: 1,
						current: 1,
						size: 2,
						distance: 500000000,
						longitude: this.longitude,
						latitude: this.latitude
					},
					callBack: (res) => {
						this.shoplist = res.data.records;
					}
				}
				this.$http.request(requestParam,true);
			},
			enterimg() {
				uni.navigateTo({
					url: './fresh'
				})
			},

			entermore() {
				uni.navigateTo({
					url: './group'
				})
			},

			todetails(e) {
				uni.navigateTo({
					url: '../allbuy/Hotdetails?sid=' + e
				})
			},

			tgroupde(e) {
				uni.navigateTo({
					url: '../allbuy/Hotdetails?sid=' + e
				})
			},

			go() {
				uni.switchTab({
					url: '/pages/allbuy/Allbuy'
				});
			},

			// 活动是否开启
			sign() {
				const requestStart = {
					url: `/api/account/selectSignState`,
					method: "get",
					data: {},
					callBack: (res) => {
						console.log(res.data.state);
						if (res.data.state == false) {
							uni.navigateTo({
								url: './Issign'
							})
						} else {
							uni.navigateTo({
								url: './Sign'
							})
						}
					}
				}
				this.$http.request(requestStart)
			},
		}

	}
</script>

<style>
	.home {
		background-color: #EEEEEE;
		height: 100%;
	}

	.head {
		width: 100%;
		height: 150rpx;
		background-color: #02127B;
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		line-height: 220rpx;
	}

	.head .money {
		font-size: 12px;
		margin-left: 20rpx;
	}

	.head .appname {
		color: #FFFFFF;
		font-size: 17px;
		margin-left: 190rpx;
	}

	/* 轮播图 */
	.swiper {
		width: 100%;
		height: 250rpx;
		border: 2rpx solid #ECECEC;
	}

	.swiperimage {
		width: 100%;
		height: 250rpx;
	}

	/* 入口图片 */
	.Ienter image {
		width: 710rpx;
		height: 394.44rpx;
		margin: 20rpx 20rpx 0;
	}

	/* 商品推荐 */
	.BUYindex {
		padding: 14rpx;
	}

	.recommend {
		width: 670rpx;
		margin: 0 auto;
		padding: 0 20rpx 20rpx;
		height: 380rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
	}

	.recommendmore {
		width: 670rpx;
		margin: 0 auto;
		padding: 0 20rpx 20rpx;
		height: 380rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
	}

	.recommend .title {
		display: flex;
		justify-content: space-between;
	}

	.recommend .title .yello {
		color: #FFC30E;
		font-size: 34rpx;
		margin: 10rpx 0 12rpx;
		font-weight: bold;
	}

	.recommend .title .green {
		color: #86C958;
		font-size: 34rpx;
		margin: 10rpx 0 12rpx;
		font-weight: bold;
	}

	.recommend .title text {
		font-size: 12px;
		color: #999999;
		margin: 20rpx 0;
	}

	.shoplist {
		display: flex;
		flex-direction: row;
	}

	/* 商品图片 */
	.shopimg {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.shopimg image {
		width: 328rpx;
		height: 202rpx;
	}

	.shopmoney {
		margin-left: 20rpx;
	}

	.shopname {
		font-size: 24rpx;
		margin: 20rpx 12rpx 4rpx 20rpx;
	}

	.nametext {
		width: 296rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
